
import { Navigate, useRoutes } from 'react-router-dom'
import Login from '../component/Login'
import Main from "../component/Main";
import NotFind from '../component/404';
import Home from "../component/Main/Home";
import About from "../component/Main/About";
import News from '../component/Main/Home/News';
import Music from '../component/Main/Home/Music'

const routes = [
    {
        path: "/login",
        element: <Login />
    },
    {
        path: "/main",
        element: <Main />,
        children: [
            {
                path: "/main/home",
                element: <Home />,
                children: [
                    {
                        path: "/main/home/news/:id",
                        element: <News />,
                    },
                    {
                        path: "/main/home/music/:id",
                        element: <Music />,
                    }
                ]
            },
            {
                path: "/main/about",
                element: <About />,
            },
        ]
    },
    {
        path: "/",
        element: <Navigate to="/login" />
    },
    {
        path: "*",
        element: <NotFind />
    },
]

// export const getRoutesList= ()=>{
//     return useRoutes(routes)
// }
// 出现报错：React Hook "useRoutes" 在函数 "getRoutesList" 中被调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数。 React 组件名称必须以大写字母开头。 React Hook 名称必须以“use”开头

// 解决方法1：将该函数变成组件的形式
// export const GetRoutesList= ()=>{
//     return useRoutes(routes)
// }

// 解决方法2：自定义一个React Hook  在hooks中可以使用hook
export const useMyRoutes = () => {
    return useRoutes(routes)
}